<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>注册</title>
    <style type="text/css">
        #divContainer {
            width: 400px;
            height: 300px;
            border: 1px solid black;
            margin: 8rem auto;
            background: url("images/b.jpg");
            background-size: cover;
        }

        .divLeft {
            width: 100px;
            float: left;
            text-align: right;
        }

        .divRight {
            width: 200px;
            float: left;

        }

        .text {
            width: 200px;
            height: 30px;

        }

        .div-content {
            margin: 15px 0px 0px 10px;
        }

        .div-title {
            padding-top: 10px;
            margin: 15px 0px 0px 10px;
        }
        .error{
            font-size: x-small;
        }

        body {
            background: url("images/login.jpg");
            background-size: cover;
        }

    </style>


</head>
<body>
<form action="/success.html" method="get" onsubmit="return check()">
    <div id="divContainer">
        <div align="center">
            <strong style="color: #2b1dd0"><h1>登录</h1></strong>
        </div>
        <div class="divLeft">
            <div class="div-title">登录名:</div>
            <div class="div-title">密码:</div>
            <div class="div-title">性别:</div>

        </div>
        <div class="divRight">
            <div class="div-content">
                <input type="text" class="text" id="txtLloginName" onblur="check()" name="username"
                       placeholder="用户名"/><span class="error" id="userId" style="color: red"></span>
            </div>
            <div class="div-content">
                <input type="password" class="text" id="Password" onblur="check()" name="password"
                       placeholder="密码"/><span class="error" id="pwdId" style="color: red"></span>
            </div>
            <div class="div-content">
                <input name="sex" type="radio" value="男"/>男
                <input name="sex" type="radio" value="女"/>女 <span class="error" id="sexId" style="color: red"></span>
            </div>
            <div class="div-content">
                &nbsp;&nbsp;&nbsp; <input style="width: 60px" type="submit" class="text" value="登录">&nbsp;&nbsp;
                <input style="width: 60px" type="reset" class="text" value="重置">
            </div>


        </div>


    </div>
</form>

<script type="text/javascript">
    function check() {
        var user = document.getElementById("txtLloginName")
        var userId = document.getElementById("userId");
        userId.innerHTML = "";
        if (user.value.length == 0) {
            userId.innerHTML = "用户名不能为空";
            return false;
        }

        var pwd = document.getElementById("Password")
        var pwdId = document.getElementById("pwdId");
        pwdId.innerHTML = "";
        if (pwd.value == "") {
            pwdId.innerHTML = "密码不能为空";
            return false;
        }

        var sexId = document.getElementById("sexId");
        sexId.innerHTML = "";
        var j = 0;
        var sex = document.getElementsByName("sex");
        for (var i = 0; i < sex.length; i++) {
            if (sex[i].checked == true) {
                j = 1;
                break;
            }
        }

        if (j == 0) {
            sexId.innerHTML = "请选择性别";
            return false;
        }

    }

</script>

</body>
</html>